<template>
  <router-link to="/portal/notice/home">
  <el-card class="notice">
    <span>公告</span>
<!--  获取公告首页置顶列表  -->
    <div class="portal-notice">
      <p v-for="item in noticeList.slice(0,4)" :key="item.noticeNumber">
        <router-link to="" @click="getNoticeDetails(item.noticeNumber)"><span>{{item.title}}</span><span> [{{item.releaseDate.split('T')[0]}}]</span></router-link>
      </p>
    </div>
  </el-card>
  </router-link>
</template>

<script>
import { queryNoticeList } from '@/services/index/notice/notice'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Notice',
  data () {
    return {
      noticeList: []
    }
  },
  created () {
    this.getNoticeList()
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 10) {
        return value.slice(0, 10) + '...'
      }
      return value
    }
  },
  methods: {
    getNoticeList () {
      const dataForm = {
        page: 1,
        pageSize: 4
      }
      const data = JSON.stringify(dataForm)
      queryNoticeList(data).then((res) => {
        if (res.code !== 10000) {
          this.$message.error('公告突然全部消失了呢！')
        }
        this.noticeList = res.data.responseBody
      })
    },
    getNoticeDetails (noticeNumber) {
      this.$router.push({
        name: 'NoticeDetails',
        params: {
          noticeNumber: noticeNumber
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import "notice.less";
</style>
